
// @import './routerconfig/routerStyle2'

ss-admin($class= '.routerGroup', $config = admin, $menusClass = '>.router-menus', $bodyClass='>.router-page', $contentClass = false)
  cfg = merge({}, admin, $config)
  //所有内容在一屏内显示
  /html, body, /.container
    height 100%
    overflow: hidden
  {$class}
    background: cfg.$routerBg if cfg.$routerBg
    height: 100%
    padding: cfg.$space if cfg.$space
    ss-display-flex(cfg.$orient, flex-start)
    //菜单部分
    {$menusClass}
      border-right: cfg.$box-line  if (cfg.$box-line)
      background: cfg.$menuBg if cfg.$menuBg
      color: cfg.$mColor   if cfg.$mColor
      margin-right: cfg.$space if cfg.$space
      position: relative;
      z-index: 2
      transition: all 250ms ease-in-out;
      &.active
        width: cfg.$min-width
        .level0
          &:hover
            .ul
              position: absolute;
              background: #fff;
              border-radius: $br
              box-shadow: $box-shadow-pop
              left: (cfg.$min-width + 10)
              min-width: 200px;
              display: block;
          >.htitle
            &:after
              content: ''
            .text
              display: none
          >.ul
            display: none
            [class*='item']
              padding-left: 25px
    //内容部分
    {$bodyClass}
      flex: 1
      padding: cfg.$boxSpace
      background: cfg.$bodyBg if cfg.$bodyBg
      border-radius: cfg.$br if cfg.$br
      overflow: hidden
      if (cfg.$bodyFlex)
        ss-display-flex(cfg.$bodyFlex)
        {$contentClass}
          flex: 1
          
    ss-menus($menusClass)
    ss-func-customscroll($menusClass, {$height: auto, $min-height: 300px, $scrollbarShow: false}) if cfg.$scrollMenus     //滚动
    ss-func-customscroll($contentClass || $bodyClass, {$height: auto, $min-height: 300px}) if cfg.$scrollBox     //滚动
    


/***************路由菜单部分*********************/
ss-menus($class='>.hlist', $config = false)
  menusCfg = merge({}, adminMenus, $config)
  {$class}
    border-radius: menusCfg.$br  if menusCfg.$br
    box-shadow: menusCfg.$bs  if menusCfg.$bs != false
    font-size: menusCfg.$size if menusCfg.$size
    line-height: menusCfg.$lh if menusCfg.$lh
    padding: menusCfg.$space-b if menusCfg.$space-b
    width: menusCfg.$width if menusCfg.$width 
    max-width: menusCfg.$mWidth if menusCfg.$mWidth
    >.item
      margin-top: menusCfg.$spaceItemM if menusCfg.$spaceItemM
      &:first-child, &:last-child
        margin-top: menusCfg.$spaceItemM2 if menusCfg.$spaceItemM2
    .level0
      >.htitle
        margin: menusCfg.$space if menusCfg.$space != false
        line-height: menusCfg.$lh-title if menusCfg.$lh-title
        font-size: menusCfg.$size-title if menusCfg.$size-title
        // margin: menusCfg.$spaceCaption if menusCfg.$spaceCaption
        cursor: menusCfg.$cursor if menusCfg.$cursor
        if (menusCfg.$mLine)
          border-bottom: menusCfg.$mLine
          color: fade-out(menusCfg.$mColor, .3)
          display: block
      &.active-none
        .ul
          display: none
      &.active
        .ul
          if (menusCfg.$isAllShow)
            display: block
          else 
            max-height: 1000px;
    .ul
      background: menusCfg.$mUlBg  if menusCfg.$mUlBg
      border-radius: menusCfg.$br  if menusCfg.$br
      // box-shadow: menusCfg.$bs  if menusCfg.$bs != false
      // overflow: hidden
      // min-width: 140px
      [class*='item']
        cursor: pointer
        padding-left: menusCfg.$spaceItem
        color: menusCfg.$color
        &:hover
          background: menusCfg.$mActiveBg if (menusCfg.$mActiveBg)
         &.active
          color: menusCfg.$mActiveColor
        &[data-path*='item-title']
          font-size: 16px
          font-weight: bold
          &:hover
            color: $color-text-title
      if (menusCfg.$type == 'activeline') 
        & {menusCfg.$typeClass}
          position: relative
          &:after //线条
            content: ''
            width: 2px
            height: 100%
            background: transparent
            position: absolute
            if (menusCfg.$typeleft != false)
              left: 0
              border-radius: 0 5px 5px 0
            else
              border-radius: 5px 0 0 5px
            top: 0
            width: 5px
            height: 90%
            top: 5%
          &.active, &:hover
            background: fade-out(menusCfg.$mActiveBg, .9)
            color: menusCfg.$mActiveBg
          &.active
            &:after //线条
              background: menusCfg.$mActiveBg
      
    if (!menusCfg.$isAllShow)
      .ul
        max-height: 0;
        overflow: hidden;
        transition: max-height .5s ease-in-out;
      .level0
        >.htitle
          ss-display-flex(row nowrap)
        .item-icon
          &:before
            margin-right: menusCfg.$iconSpace
            font-size: menusCfg.$iconSize
      .itemroot
        if (menusCfg.$iconRight)
          >.htitle
              &:after
                content: menusCfg.$iconRight
                transform: rotateZ(0)
                font-size: 12px
                margin-left: auto
                transition: transform .5s ease-in-out;
          &.active
            >.htitle
              &:after
                transform: rotateZ(180deg)
/***************路由菜单部分 end*********************/


/***************路由顶部部分*********************/
ss-root-header($class= '.root-header', $config = false, $class2 = '.admin-header')
  headerCfg = merge({}, rootHeadCfg, $config)
  {$class}
    background: headerCfg.$HeaderBg
    box-shadow: $box-shadow
    box-sizing: border-box
    color: headerCfg.$HeadColor
    font-size: headerCfg.$HeadSize
    height: headerCfg.$HeaderHeight
    position: relative
    transition: 250ms ease-in-out;
    z-index 1
    {$class2}
      @extends $flex-nowrap-start-center
      height: headerCfg.$HeaderHeight2 if headerCfg.$HeaderHeight2
      border-bottom: 1px solid headerCfg.$HeaderBb if headerCfg.$HeaderBb 
      padding: headerCfg.$HeaderPadding if headerCfg.$HeaderPadding != false
    if (headerCfg.$HeaderLogo)
      .item-logo
        width: headerCfg.$logoWidth if headerCfg.$logoWidth
        height: headerCfg.$HeaderHeight
        padding: $space
        box-sizing: border-box
        if (headerCfg.$bgimage)
          background-image: url(headerCfg.$bgimage)
          background-repeat: no-repeat
          background-position: center center
          background-size: contain
          .item-logo-title
            display: none
        else 
          @extends $flex-nowrap-center-center
          .item-logo-title
            margin-left: 4px
            font-size: 36px
            font-family: monospace
    .item-nav
      ss-display-flex()
      line-height: 30px
      font-size: 16px
      >.item
        &.active
          a
            color: $color-primary
    .hbody
      flex: 1
      // @extends $flex-nowrap-between-center
    .admin-right
      @extends $flex-nowrap
      margin-left: auto
    .icon-active
      margin-left: 36px
/***************路由顶部部分 end*********************/